<template>
  <div class="after-sale">
    <div class="commodity-title">
      售后管理
    </div>
    <div class="commodity-container">
      <a-input-search
        placeholder="搜索物料零件号/物料名称"
        style="width:300px;margin-top:16px;"
        v-model="materialsName"
        @search="onSearch"
      >
        <img slot="prefix" style="width:13px;" src="../../../assets/image/sellerHub/searchicon.png" alt="">
        <a-button slot="enterButton">
          搜索
        </a-button>
      </a-input-search>
      <span :class="isShowSearch?'commodity-menu':'commodity-menu commodity-menu-close'" @click="openMenu"><img :src="isShowSearch?require('../../../assets/image/sellerHub/menu.png'):require('../../../assets/image/sellerHub/menu_close.png')" alt=""></span>
      <a-button style="float:right;margin-top:16px;" slot="enterButton">
          <img style="width:14px;margin-right:7px;position:relative;top:-2px;" src="../../../assets/image/sellerHub/export.png" alt="">
          批量导出
      </a-button>
      <div class="commodity-search-box" v-if="isShowSearch">
        <span class="ant-popover-arrow search-box-arrow"></span>
        <a-form :form="form" style="overflow: hidden;">
        <a-form-item label="申请时间:">
             <a-config-provider :locale="locale">
              <a-range-picker style="width:100%;" v-model="applyTime">
                <img slot="suffixIcon" src="../../../assets/image/sellerHub/calendar.png" alt="">
                <template slot="dateRender" slot-scope="current">
                  <div class="ant-calendar-date" :style="getCurrentStyle(current)">
                    {{ current.date() }}
                  </div>
                </template>
              </a-range-picker>
            </a-config-provider>
          </a-form-item>
          <a-form-item label="处理时间:">
             <a-config-provider :locale="locale">
              <a-range-picker style="width:100%;" v-model="handleTime">
                <img slot="suffixIcon" src="../../../assets/image/sellerHub/calendar.png" alt="">
                <template slot="dateRender" slot-scope="current">
                  <div class="ant-calendar-date" :style="getCurrentStyle(current)">
                    {{ current.date() }}
                  </div>
                </template>
              </a-range-picker>
            </a-config-provider>
          </a-form-item>
          <a-form-item label="责任判定:">
            <a-select
              v-model="responsibility"
              placeholder="请选择"
            >
              <a-select-option value="0">
                平台责任
              </a-select-option>
              <a-select-option value="1">
                4S店责任
              </a-select-option>
              <a-select-option value="2">
                承运商责任
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-button @click="returnInit" style="position:absolute;bottom:16px;right:16px;border:none;box-shadow:none;">
              重置
          </a-button>
        </a-form>
      </div>
      <ul class="nav-list">
        <li v-for="(item, i) in navData" :class="{ 'li-checked' : active === i }" :key="i" @click="checkNavList(i)">{{item.statusName}}<span style="margin-left:8px;">({{item.total}})</span></li>
      </ul>
      <a-row type="flex" class="table-title">
        <a-col :span="8" class="textOverflow" style="text-align:left;padding-left:12px;">
          商品
        </a-col>
        <a-col :span="2" class="textOverflow">
          单价(元)
        </a-col>
        <a-col :span="2" class="textOverflow">
          金额(元)/数量
        </a-col>
        <a-col :span="4" class="textOverflow">
          服务网点
        </a-col>
        <a-col :span="3" class="textOverflow">
          售后金额(元)
        </a-col>
        <a-col :span="2" class="textOverflow">
          4S店收货状态
        </a-col>
        <a-col :span="3" class="textOverflow">
          操作
        </a-col>
      </a-row>
      <div v-if="dataList">
        <div class="table-items" v-for="(item,i) in dataList" :key="i">
          <div class="item-top">
            <div class="item-top-left">
              <img src="../../../assets/image/sellerHub/relation.png" alt="">
              <p>
                <span>售后编号：{{item.afterSaleNo}}</span>
                <span>订单日期：{{$dateTrans(item.applyTime).format('yyyy-MM-dd hh:mm:ss')}}</span>
                <span>处理时间：{{$dateTrans(item.dealTime).format('yyyy-MM-dd hh:mm:ss')}}</span>
              </p>
              <p class="item-left-p">
                <span>关联订单：</span>
                <span>{{item.subOrderId}}</span>
              </p>
            </div>
            <div class="item-top-right">
              <span class="item-right-status">
                {{item.duty | dutyFilter}}
                <a-popover>
                  <template slot="content" style="background:rgba(0,0,0,0.5);color:#fff">
                    具体说明：{{item.reason}}
                  </template>
                  <a-icon style="cursor:pointer;" type="question-circle" />
                </a-popover>
              </span>
              <span>{{item.afterState | afterStateFilter}}</span>
            </div>
          </div>
          <div class="item-container">
            <a-row type="flex">
              <a-col :span="12">
                <a-row type="flex" class="item-container-left" v-for="(_item,index) in item.detailDTOS" :key="index+i" align="middle">
                  <a-col :span="16" class="textOverflow">
                    <div class="order-table-name" style="text-align:left;">
                      <img class="dinghuo" src="../../../assets/image/sellerHub/dinghuo.png" alt="">
                      <img :src="_item.materialImg" alt="">
                      <div class="table-name-right">
                        <div class="right-item">
                          <span>{{_item.materialName}}</span>
                          <em>|</em>
                          <i class="textOverflow" >零件号:{{_item.manufacturerPartNum}}</i>
                        </div>
                        <div class="right-item textOverflow">
                          <span class="item-label">规格：</span>
                          <span>{{_item.specifications}}</span>
                          </div>
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="4" class="textOverflow">
                    {{_item.sumCostPrice}}
                  </a-col>
                  <a-col :span="4" class="textOverflow" style="text-align:right;">
                    <p style="margin-right:13px;">{{_item.price}}</p>
                    <p style="margin-right:13px;">{{_item.quantity}}{{_item.unit}}</p>
                  </a-col>
                </a-row>
              </a-col>
              <a-col :span="4" class="border-right ">
                <div class="vertical-middle service-address">
                  {{item.tenantName}}
                </div>
              </a-col>
              <a-col :span="3" class="textOverflow border-right">
                <div class="vertical-middle">
                  <p>{{item.costAmount}}</p>
                  <!-- <p class="distribution-status distribution-status-green">已配货</p> -->
                </div>
              </a-col>
              <a-col :span="2" class="textOverflow border-right">
                <div class="vertical-middle">
                  <p class="distribution-status distribution-status-green">{{item.fourServiceReceiveState | fourServiceReceiveStateFilter}}</p>
                </div>
              </a-col>
              <a-col :span="3" class="textOverflow">
                <div class="vertical-middle">
                  <div v-if="item.afterState=='REJECTED' || item.afterState=='FINISHED'" class="vertical-handle" @click="immediatelyHandle(item.id)">立即处理</div>
                  <p v-else class="edit-details-msg" @click="detailsMsg(item.id)"><img src="../../../assets/image/sellerHub/details_msg.png" alt="">查看详情</p>
                </div>
              </a-col>
            </a-row>
          </div>
        </div>
      </div>
      <div class="nothing-img" v-else>
        <img src="../../../assets/image/sellerHub/nothing.png" alt="">
      </div>
      <div class="bottom-pagination">
        <pagination 
          style="float:right;margin:20px;" 
          @pageChange="pageChange"
          :total="total"
          :current="current">
        </pagination>
        <span class="paginationBefore">共 <i>{{total}}</i> 条</span>
      </div>
    </div>
    <Waithandle v-model="isShowWait" :afterSaleId="afterSaleId" :inventoryList="inventoryList" :drawerData="drawerData"/>
    <RejectMsg v-model="isShowReject" :afterSaleId="afterSaleId" :inventoryList="inventoryList" :drawerData="drawerData"/>
  </div>
</template>
<script>
import Vue from 'vue'
import {Popover,Form,ConfigProvider} from 'ant-design-vue'
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import Waithandle from './components/waitHandle'
import RejectMsg from './components/rejectMsg'
import Pagination from '@/components/common/pagination'
Vue.use(Popover)
Vue.use(Form)
Vue.use(ConfigProvider)
export default {
  components:{Waithandle,Pagination,RejectMsg},
  data() {
    return {
      locale: zhCN,
      visible: false,
      form: this.$form.createForm(this, { name: 'coordinated' }),
      total:0,//总条数
      current:1,//当前页
      isShowWait: false,//是否展示售后单详情
      isShowReject: false,//是否展示驳回详情
      isShowSearch: true,//是否展示搜索
      navData: [
        { statusName: '全部', enName:'all' },
        { statusName: '待处理', enName:'pendingCheck' },
        { statusName: '待货物核对', enName:'check' },
        { statusName: '待财务退款', enName:'pendingRefund' },
        { statusName: '售后驳回', enName:'rejected' },
        { statusName: '售后完成', enName:'finished' },
      ],
      active: 0,
      stockWarning:'',
      materialsName: '',//物料名称
      drawerData:{},
      inventoryList:{},//点击列表数据
      pageSize: 10,//列表每页展示数量
      pageNo:1,
      applyTime:[],//申请时间
      handleTime:[],//处理时间
      responsibility:'',//责任判定
      afterSaleId:'',//售后订单id

      dataList:[],//列表数据
      afterState:"",//售后状态

    }
  },
  created() {
    this.init();
  },
  computed: {
    _params() {
      //查询参数
      return {
        "afterState": this.afterState,
        "applyEndTime": this.applyTime[1],
        "applyStartTime": this.applyTime[0],
        "dealEndTime": this.handleTime[1],
        "dealStartTime": this.handleTime[0],
        "duty": this.responsibility,
        "fourServiceReject": true,
        "id": this.$store.state.user.currentTenant.id,
        "keyWords": this.materialsName,
        "pageNo": 1,
        "pageSize": 10,
        "supplierId": "",
        "tenantId": "",
        "type": 0
      }
    }
  },
  watch: {
    _params() {
      this.init();
    }
  },
  filters: {
    dutyFilter(_val) {
      let _msg = '';
      switch(_val){
        case 'PLATFORM':
          _msg="平台责任";
          break;
        case 'FOUR_SERVICE':
          _msg="4S店责任";
          break;
        case 'CARRIER':
          _msg="承运商责任";
          break;        
      }
      return _msg;
    },
    fourServiceReceiveStateFilter(_val) {
      let _msg = '';
      _val=='PENDING'?_msg="待收货":_val=='RECEIVED'?_msg="已收货":_msg='--';
      return _msg;
    },
    afterStateFilter(_val) {
      let _msg = "";
      switch(_val){
        case 'PENDING_DEAL':
          _msg="待处理";
          break;
        case 'PENDING_CHECK':
          _msg="待4S处理";
          break;
        case 'TO_DISTRIBUTE':
          _msg="待分配";
          break;
        case 'TO_PICKUP':
          _msg="待取货";
          break;
        case 'PENDING_RECEIVE':
          _msg="待收货";
          break; 
        case 'PENDING_REFUND':
          _msg="待财务退款";
          break; 
        case 'REJECTED':
          _msg="售后驳回";
          break; 
        case 'FINISHED':
          _msg="售后完成";
          break;            
      }
      return _msg;
    }
  },
  methods: {
    init() {
      //查询列表个数
      this.$store.dispatch('request', this.$api.sellerCenter.getAfterSaleList(
          this._params
        )).then(res => {
          console.log(res,'res')
          this.dataList = res.result.records;
        }).catch(() => {
          this.$message.error('')
        })

      //查询列表数值
      this.$store.dispatch('request', this.$api.sellerCenter.getAfterSaleCount(
      )).then(res => {
          console.log(res,'res')
          for(let key in res.result){
            for(let i =0;i<this.navData.length;i++){
              if(key===this.navData[i].enName){
                this.navData[i].total = res.result[key]
              }
            }
          }
          this.$forceUpdate()
        }).catch(() => {
          this.$message.error('')
        })
    },
    pageChange(_page) {
      //改变页码
      this.current = _page;
      this.pageNo = _page;
      this.init();
    },
    checkNavList(i) {
      //选择库存状态
      this.active = i;
      this.afterState = i==0?"":i==1?1:i==2?4:i==3?5:i==4?6:i==5?7:'';
    },
    openMenu() {
      //打开搜索页
      this.isShowSearch = !this.isShowSearch;
    },
    onSearch() {
      this.init();
    },
    getCurrentStyle(current, today) {
      const style = {};
      if (current.date() === 1) {
        style.border = '1px solid #1890ff';
        style.borderRadius = '50%';
      }
      return style;
    },
    returnInit() {
      //重置
      this.orderTime = [];//订单时间
      this.orderStatus = '';//订单状态
      this.goodsStatus = '';//商品状态
      this.sendStatus = '';//配送方式
      this.serviceAdr = '';//服务网点
      this.payMode = '';//支付方式
    },
    immediatelyHandle(_id) {
      //立即处理/售后单详情
      this.afterSaleId = _id;
      this.isShowWait = true;
    },
    detailsMsg(_id) {
      //抽屉---驳回详情
      this.afterSaleId = _id;
      this.isShowReject = true;
    },
  },
}
</script>
<style lang="less">
ul,li,i,em,p{
  list-style: none;
  margin: 0;
  padding: 0;
  font-style:normal;
}
.textOverflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display:inline-block;
  vertical-align: middle;
  text-align: center;
}
.after-sale {
  .commodity-title {
    width: 100%;
    height: 54px;
    line-height: 54px;
    padding-left: 24px;
    font-size: 16px;
    font-weight: 600;
    background: #fff;
  }
  .commodity-container {
    background: #fff;
    margin: 16px;
    width: calc(100% - 32px);
    min-height: 800px;
    padding: 24px;
    overflow: hidden;
  }
  .commodity-menu {
    width: 32px;
    height: 32px;
    display: inline-block;
    background: rgba(215,55,55,0.08);
    margin-top: 16px;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    margin-left: 8px;
    border-radius: 2px;
    img {
      position: absolute;
      top: 8px;
      left: 8px;
    }
  }
  .commodity-menu-close {
    background: #f9f9f9;
  }
  .commodity-search-box {
    width: 100%;
    background: #ffffff;
    border-radius: 2px 0px 3px 0px 2px 2px 2px;
    box-shadow: 0px 0px 6px 1px rgba(39,36,36,0.08);
    margin-top: 16px; 
    position: relative;
    padding: 17px 9px 0;
  }
  .search-box-arrow {
    position: absolute;
    border-color: transparent #fff #fff transparent;
    box-shadow: -2px -2px 5px  rgba(0, 0, 0, 7%);
    left: 315px;
    background: #fff;
    width: 16px;
    height: 16px;
    top: -8px;
  }
  .ant-form-item {
    width: 16%;
    float: left;
    margin-left: 15px;
    .ant-form-item-label {
      line-height: 28px;
    }
  }
  .nav-list {
    width: 100%;
    border: 1px solid rgba(39,36,36,0.06);
    border-radius: 3px;
    height: 54px;
    line-height: 52px;
    margin-top: 16px;
    li {
      float: left;
      width: 107px;
      text-align: center;
      cursor: pointer;
      background: #f9f9f9;
      border-right: 1px solid #eeeeee;
    }
    li:hover {
      color: @activeRed;
      border-bottom: 1px solid #fff;
    }
    .li-checked {
      color: @activeRed;
      background: #fff;
      border-bottom: 1px solid #fff;
    }
  }
  .service-address {
    padding: 0 12px;
    width: 100%;
    text-align: center;
  }
  .table-items {
  .item-top {
    background: #f9f9f9;
    border: 1px solid rgba(39,36,36,0.08);
    border-radius: 2px 2px 0 0;
    border-bottom: none;
    height: 72px;
    
  }
  .item-container {
    min-height: 92px;
    padding: 16px 0;
    margin-bottom: 16px;
    border: 1px solid rgba(39,36,36,0.08);
    border-radius: 0 0 2px 2px;
  }
  .item-container-left {
    border-right: 1px solid rgba(39,36,36,0.06);
    border-top: 1px solid rgba(39,36,36,0.06);
    height: 76px;
    padding-bottom: 16px;
  }
  .item-container-left:first-child{
    border-top: none;
  }
  .item-container-left:last-child{
    padding: 0;
    height: 60px;
  }
  .border-right {
    border-right: 1px solid rgba(39,36,36,0.06);
  }
  .item-top-left {
    padding-top: 12px;
    float: left;
    position: relative;
    img {
      width: 18px;
      position: absolute;
      left: 16px;
      top: 27px;
    }
    p {
      font-size: 12px;
      padding-left: 50px;
      line-height: 24px;
      color: #272424;
      span {
        margin-right: 33px;
        display: inline-block;
      }
    }
    .item-left-p {
      span {
        margin-right: 0;
      }
      span:first-child {
        color: rgba(39,36,36,0.6);
      }
      span:last-child {
        color: rgba(24,118,255,1);
      }
    }
  }
  .item-top-right {
    float: right;
    position: relative;
    .item-right-status {
      display: inline-block;
      width: 104px;
      height: 34px;
      background: url('../../../assets/image/sellerHub/goods_bg.png') no-repeat center top;
      background-size: 100% 100%;
      position: absolute;
      top: 18px;
      right: 166px;
      font-size: 14px;
      color: @activeRed;
      font-weight: 600;
      padding: 7px 12px;
    }
    span:last-child {
      background: url('../../../assets/image/sellerHub/edit_bg.png') no-repeat center top;
      background-size: 100% 100%;
      width: 124px;
      height: 70px;
      display: inline-block;
      position: absolute;
      top: -3px;
      right: 20px;
      text-align: center;
      line-height: 70px;
      font-size: 16px;
      color: #79c860;
    }
  }
}
}
.bottom-pagination>.paginationBefore {
  float: right;
  line-height: 70px;
  i {
    color: @activeRed;
  }
}
.bottom-pagination {
  position: fixed;
  bottom: 0;
  width: calc(100% - 178px);
  background: #fff;
  right: 0;
  box-shadow: 0px -2px 2px 0px rgba(39,36,36,0.02); 
  padding-right: 30px;
}
.table-title {
  height: 48px;
  line-height: 48px;
  background: #f9f9f9;
  margin: 16px 0 12px;
  font-size: 14px;
  font-weight: 500;
}
.order-table-name {
  margin-left: 24px;
  position: relative;
  img {
    display: inline-block;
    width: 60px;
    height: 60px;
    border: 1px solid rgba(34,49,77,0.08);
  }
  .dinghuo {
    width: 40px;
    height: 16px;
    position: absolute;
    top: 44px;
    left: 20px;
  }
  .table-name-right {
    width: 223px;
    text-align: left;
    margin-left: 12px;
    color: rgba(39,36,36,1);
    display: inline-block;
    vertical-align: middle;
    .right-item {
      text-align: left;
      display: block;
      height: 28px;
      line-height: 28px;
      i {
        height: 20px;
        display: inline-block;
        line-height: 20px;
      }
      em {
        color: #f2f2f2;
        margin: 0 8px;
        position: relative;
        top: -1px;
      }
      .item-label {
        color: rgba(39,36,36,0.6);
      }
    }
  }
}
.vertical-middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  .vertical-handle {
    width: 72px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    color: #fff;
    background: @activeRed;
    font-size: 12px;
    cursor: pointer;
  }
}
.distribution-status {
  height: 26px;
  line-height: 26px;
  text-align: center;
  font-size: 12px;
  width: 52px;
  border-radius: 2px;
}
.distribution-status-green {
  background: rgba(121,200,96,0.08);
  color: #79c860;
}
.distribution-status-yellow {
  background: rgba(255,144,3,0.08);
  color: #ff9003;
}
.distribution-status-grey {
  background: rgba(248,248,248,1);
  color: rgba(39,36,36,0.3);
}
.distribution-status-cancel {
  background: rgba(248,248,248,1);
  color: rgba(39,36,36,1);
}
.edit-details-msg {
  cursor: pointer;
  img {
    width: 16px;
    display: inline-block;
    margin-right: 8px;
  }
  color: #272424;
}
.edit-cancel {
  width: 80px;
  line-height: 24px;
  height: 24px;
}
.nothing-img {
  width: 100%;
  text-align: center;
  img {
    display: inline-block;
    width: 160px;
    margin: 40px 0;
  }
}
</style>